<template>
  <div class="form-designer-container">
    <el-button @click="refresh">回显</el-button>
    <el-button @click="showForm">显示表单</el-button>
    <fc-designer ref="designer" height="100%" :menu="menuList" :config="config" @save="handleSave" />
    <form-create v-if="formVisible" :value.sync="formData" v-model="fApi" :rule="rule" :option="options"
      @submit="handleSubmit" />
  </div>
</template>

<script>
import { formCreate } from '@form-create/designer';

export default {
  name: 'FormDesigner',
  data() {
    return {
      menuList: [
        {
          title: '投票选项',
          name: 'vote',
          list: [
            { label: '单选', name: 'radio', icon: 'icon-radio' },
            { label: '多选', name: 'checkbox', icon: 'icon-checkbox' },
          ],
        },
      ],
      config: {
        // updateDefaultRule: {
        //   input: {
        //     props: {
        //       disabled: true,
        //     },
        //   },
        //   select: {
        //     $required: true,
        //     options: [
        //       { label: '请选择', value: '' },
        //       { label: '选项1', value: 'option1' },
        //       { label: '选项2', value: 'option2' },
        //     ],
        //   },
        //   textarea: {
        //     props: {
        //       rows: 5, // 默认行数
        //     },
        //   },
        // },
        showSaveBtn: true, // 是否显示保存按钮
        showMenuBar: false, // 是否显示左侧工具栏
        showLanguage: true, // 是否显示多语言配置
        showJsonPreview: true, // 是否显示JSON预览模块
        showLanguage: false, // 是否显示多语言配置
        showStyleForm: false, // 是否显示组件的样式配置表单
        showEventForm: false, // 是否显示组件的事件配置表单
        labelConfig: true, // 是否显示标签配置
        fieldReadonly: false, // 字段ID是否只读
        showComponentName: false, // 隐藏标签配置
        showControl: false, // 隐藏组件的联动数据配置
        showCustomProps: false, // 是否显示自定义props按钮
        fieldList: [
          { value: 'name', label: '姓名' },
          { value: 'age', label: '年龄' },
        ],
        updateDefaultRule: {
          radio: {
            title: '张三',
            options: [
              { label: '同意', value: '同意' },
              { label: '不同意', value: '不同意' },
              { label: '弃权', value: '弃权' },
            ],
          },
          checkbox: {
            title: '张三',
            options: [
              { label: '同意', value: '同意' },
              { label: '不同意', value: '不同意' },
              { label: '弃权', value: '弃权' },
            ],
          },
        },
        // formRule: {
        //   // prepend: true,
        //   // append: true, // 添加到底部
        //   rule() {
        //     return [
        //       {
        //         type: 'input',
        //         field: 'formCreateMark',
        //         title: '表单备注',
        //       },
        //     ];
        //   },
        // },
      },
      ruleJSON: '',
      rule: '',
      optionsJSON: '',
      options: '',
      designerVisible: true,
      formVisible: false,
      fApi: null,
      formData: null,
      value: null,
    };
  },
  methods: {
    handleSave(obj) {
      console.log('obj', obj);
      console.log('rule', obj.rule);
      console.log('options', obj.options);
      this.ruleJSON = obj.rule;
      this.optionsJSON = obj.options;
      this.rule = formCreate.parseJson(this.ruleJSON);
      this.options = formCreate.parseJson(this.optionsJSON);
      console.log('this.rule', this.rule);
      console.log('this.options', this.options);
      // 示例：调用后端接口保存表单规则和配置
      // axios
      //   .post('/api/saveForm', {
      //     rules: rule, //JSON字符串
      //     options: options, //JSON字符串
      //   })
      //   .then((response) => {
      //     // 处理保存成功的逻辑
      //     console.log('表单保存成功', response.data);
      //   })
      //   .catch((error) => {
      //     // 错误处理
      //     console.error('表单保存失败', error);
      //   });
    },
    refresh() {
      console.log('this.$refs.designer', this.$refs.designer);
      this.$refs.designer.setOptions(this.optionsJSON);
      this.$refs.designer.setRule(this.ruleJSON);
    },
    showForm() {
      this.designerVisible = !this.designerVisible;
      this.formVisible = !this.formVisible;
    },
    handleSubmit(formData) {
      console.log('formData', formData);
    },
  },
};
</script>

<style lang="scss" scoped>
.form-designer-container {
  height: calc(100vh - 84px);
}
</style>
<!-- <template>
  <form-create :value.sync="formData" v-model="fapi" :rule="rule" :option="option" @submit="onSubmit"></form-create>
</template>

<script>
import formCreate from '@form-create/element-ui';

export default {
  components: {
    formCreate: formCreate.$form(),
  },
  data() {
    const option = formCreate.parseJson(
      '{"form":{"inline":false,"hideRequiredAsterisk":false,"labelPosition":"right","size":"default","labelWidth":"125px"},"resetBtn":{"show":false,"innerText":"重置"},"submitBtn":{"show":true,"innerText":"提交"}}'
    );
    const form = {
      form: {
        inline: false,
        hideRequiredAsterisk: false,
        labelPosition: 'right',
        size: 'default',
        labelWidth: '125px',
      },
      resetBtn: { show: false, innerText: '重置' },
      submitBtn: { show: true, innerText: '提交' },
    };
    const rule = [
      {
        type: 'radio',
        field: 'F6utmbga2wisabc',
        title: '单选框',
        info: '',
        effect: { fetch: '' },
        $required: false,
        options: [
          { label: '选项01', value: '1' },
          { label: '选项02', value: '2' },
          { label: '选项03', value: '3' },
        ],
        _fc_id: 'id_Fx5kmbga2wisacc',
        name: 'ref_Fsnqmbga2wisadc',
        display: true,
        hidden: false,
        _fc_drag_tag: 'radio',
      },
      {
        type: 'radio',
        field: 'Forambga2xrgaec',
        title: '单选框',
        info: '',
        effect: { fetch: '' },
        $required: false,
        options: [
          { label: '选项01', value: '1' },
          { label: '选项02', value: '2' },
          { label: '选项03', value: '3' },
        ],
        _fc_id: 'id_F8m6mbga2xrgafc',
        name: 'ref_F6avmbga2xrgagc',
        display: true,
        hidden: false,
        _fc_drag_tag: 'radio',
      },
    ];

    return {
      formData: {},
      fapi: null,
      rule: formCreate.parseJson(
        '[{"type":"radio","field":"F6utmbga2wisabc","title":"单选框","info":"","effect":{"fetch":""},"$required":false,"options":[{"label":"选项01","value":"1"},{"label":"选项02","value":"2"},{"label":"选项03","value":"3"}],"_fc_id":"id_Fx5kmbga2wisacc","name":"ref_Fsnqmbga2wisadc","display":true,"hidden":false,"_fc_drag_tag":"radio"},{"type":"radio","field":"Forambga2xrgaec","title":"单选框","info":"","effect":{"fetch":""},"$required":false,"options":[{"label":"选项01","value":"1"},{"label":"选项02","value":"2"},{"label":"选项03","value":"3"}],"_fc_id":"id_F8m6mbga2xrgafc","name":"ref_F6avmbga2xrgagc","display":true,"hidden":false,"_fc_drag_tag":"radio"}]'
      ),
      option: option,
    };
  },
  methods: {
    onSubmit(formData) {
      console.log('formData', formData);
      //todo 提交表单
    },
  },
};
</script> -->
